Blogger Sayfa Numaralandırma Eklentisi

Blogger Sayfa Numaralandırma Eklentisi  
Blogger bloggunuza önceki sonra kayıtlar yerine, daha şık sayfa nubaralandırma eklemeye ne dersiniz? bloggunuzu güzel görünüm kazandırmak, acısında güzel bir eklenti, biliyorsunuz ki blogger temaları coğunda sayfa numaralandırma yokdur. önceki sonraki kayıtlar diye link vardır, hic hoş durmaya görünüm acısında estetik durmayan bu, görünümden kurtulmak isterseniz aşağıda göstercegim uygulamayı yapmanız yeterli olcak.

Blogger Sayfa Numaralandırma Eklentisi Blogguma Nasıl Uygularım? 

•  Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla </body> Kodunu bulun. buldugunuz </body>  kodu öncesi aşağıda verdigim kodu ekleyin kaydet diyip cıkın işlemimiz bitmişdir.

<style type="text/css">
    .showpageArea{padding:10px;color : #003366;text-align : left;width : 100%;}
    .showpage a {float:left;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22NUAr6VWFP-tckeqRLJxYDdqlDXIuZaqnKB4bjpxoaxyKX1mRRbYOgPh7ICMWdNHTo0T2vAoLSOxigHkdj5zn4HQfXEZ_lWo5vYCJeJpLRdUI1unvvQSaok0GfMqec9Ays-gWnA-jwrA/) no-repeat 0 0;text-align : center;width : 127px;height : 42px;text-align : center;display : block;margin : 0 5px;color : #333;padding-top : 6px;}
    .showpage a:hover {color : #333;margin : 0 5px;padding-top : 6px;}
    .showpageOf{float:left;padding-top : 6px;}
    .showpageNum a {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1z6QO7XuXpptnrv8xl6bcVBQdafuZbchd_ed5ambJ7_4ZLOezDHMnhUcZVcPeUDSl2Phe1Yx1cfk0sr-FGx0MkRqyK9wj8ELrSdQ7vWNWEI5173CsNmvcgdfn_YP9CZt1IA3Abshg0NK/) no-repeat 0 0;width : 37px;height : 42px;display : block;text-align : center;float : left;margin : 0 5px;padding-top : 6px;text-decoration : none;color : #333;}
    .showpageNum a:hover {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1z6QO7XuXpptnrv8xl6bcVBQdafuZbchd_ed5ambJ7_4ZLOezDHMnhUcZVcPeUDSl2Phe1Yx1cfk0sr-FGx0MkRqyK9wj8ELrSdQ7vWNWEI5173CsNmvcgdfn_YP9CZt1IA3Abshg0NK/) no-repeat 0 100%;color : #fff;}
    .showpagePoint {background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO1z6QO7XuXpptnrv8xl6bcVBQdafuZbchd_ed5ambJ7_4ZLOezDHMnhUcZVcPeUDSl2Phe1Yx1cfk0sr-FGx0MkRqyK9wj8ELrSdQ7vWNWEI5173CsNmvcgdfn_YP9CZt1IA3Abshg0NK/) no-repeat 0 100%;width : 37px;height : 42px;display : block;float : left;text-align : center;margin : 0 5px;padding-top : 6px;font-weight : bold;color : #fff;}
    .showpageNum a:link, .showpage a:link {text-decoration : none;color : #cc0000;}
</style>
<script style='text/javascript'>
var pageCount=5;
var displayPageNum=1;
var upPageWord="Önceki";
var downPageWord="Sonraki";
</script>
<script type='text/javascript' src="http://widgets.way2blogging.org/blogger-widgets/w2b-beautiful-pagenavi.js"/>

Tavsiye Etdigimiz Başka Eklenti.  
Blogger Önceki Sonraki Kayıtlar Yerine Resim Ekleme 

Devamını Oku

Blogger Yazı Altına Sosyal Paylaş Eklentisi

Blogger icin Yazı Altına Sosyal Paylaş Eklentisi  Sizlere paylaşcağım eklentide Google, Twitter, Facebook,  ait üclü sosyal paylaş düğmeleri  oldukca dikat ceken  güzel bir görünümü var. tek tek kutu icinde olan sosyal paylaş eklentileri, yayınlarımızın altında olcak şekilde yerleşdirceğiz. yayınlarımızın sosyal medyada paylaşımlarını artdırcak olan bir eklenti aşağıda gördünüz gibi bir görünümü olcak.

Blogger Yazı Altı Sosyal Paylaş Eklentisi Blogguma Nasıl Uygularım? 
  
1 Adım : Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla <div class='post-footer'>   kodunu bulun aşağıda verdigim kodu  altına gelcek şekilde yapışdırın kaydet deyip cıkın.

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<style> 
.promote_post_bg { 
    height: 103px; 
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3Bv-4iQxW0G4sh-d11qli7fRu9Bq7rRmUJRIFSHXewwK86yUcBf4IS3cQfy2Rqyw-hipX757OQ1jfAwLaTyZoVPs6K_A2i7RpUeRMN-uVYKoZ7AF3YJezew71Fm7nazgSAOZYMjDO3UM/s516/paylas.png) 0 -7px no-repeat; 
    width: 500px; 
    margin-left: 65px;} 
.promote_twitter { 
    width: 130px; 
    height: 38px; 
    float: left; 
    margin: 0 39px 0 0; 
    padding: 65px 0 0 13px; 
    text-align: center;} 
.promote_facebook { 
    width: 115px; 
    height: 40px; 
    float: left; 
    margin: 0 39px 0 0; 
    padding: 63px 0 0 28px; 
    text-align: center;} 
.promote_google { 
    width: 65px; 
    height: 40px; 
    float: left; 
    margin: 0 39px 0 0; 
    padding: 65px 0 0 28px; 
    text-align: center; 
} 
</style> 
</b:if> 
<div class='promote_post_bg'> 
<div class='promote_twitter'> 
<a class='twitter-share-button' data-via='helperblogger' href='https://twitter.com/share'>Tweet</a> 
<script> 
                ! 
                function (d, s, id) { 
                    var js, fjs = d.getElementsByTagName(s)[0]; 
                    if (!d.getElementById(id)) { 
                        js = d.createElement(s); 
                        js.id = id; 
                        js.src = &quot;//platform.twitter.com/widgets.js&quot;; 
                        fjs.parentNode.insertBefore(js, fjs); 
                    } 
                }(document, &quot;script&quot;, &quot;twitter-wjs&quot;); 
            
</script></div> 
<div class='promote_facebook'> 
<fb:like action='like' colorscheme='light' expr:href='data:post.canonicalUrl' font='verdana' layout='button_count' send='false' show_faces='false'/> 
<div> 
<b:if cond='data:post.isFirstPost'> 
<script> 
                        (function (d) { 
                            var js, id = &#39;facebook-jssdk&#39;; 
                            if (d.getElementById(id)) { 
                                return; 
                            } 
                            js = d.createElement(&#39;script&#39;); 
                            js.id = id; 
                            js.async = true; 
                            js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;; 
                            d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js); 
                        }(document)); 
                    
</script> 
</b:if></div> 
</div> 
<div class='promote_google'> 
<g:plusone annotation='none' size='medium'/> 
<script type='text/javascript'> 
                (function () { 
                    var po = document.createElement(&#39;script&#39;); 
                    po.type = &#39;text/javascript&#39;; 
                    po.async = true; 
                    po.src = &#39;https://apis.google.com/js/plusone.js&#39;; 
                    var s = document.getElementsByTagName(&#39;script&#39;)[0]; 
                    s.parentNode.insertBefore(po, s); 
                })(); 
            
</script></div> 
</div>

Tavsiye Etdigimiz Alternatif  Sosyal paylaş eklentileri.

• Blogger Facebook Sosyal Paylaş eklentileri 4 Stil 
• Blogger Sosyal Paylaş Butonları 
• Yandan Açılan Sosyal Paylaş Eklentisi Blogger

Devamını Oku

Yandan Açılan Sosyal Paylaş Eklentisi Blogger

Yandan Acılan Soyal Paylaş Eklentisi sol yandan acılan, sosyal paylaş eklentisi. sosyal medyada takipci Sayınızı artdırmanıza yarıyacak, bir ekleni sayfa aşağı indikce hareket eden, üclü sosyal paylaş eklentisi. bu eklentiyle bloggunuzu ziyaret eden ziyaretcilerden sosyal ağlarda, bloggunuzu takip etmesini saglayabilirsiniz. eklentiyi beğendiyseniz aşağıda göstercegim uygulamayı takip ederek, bloggunuza ekleyebilirsiniz.

Sosyal Paylaş Eklentisini Blogguma Nasıl Uygularım? 

1 Adım : Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla ]]></b:skin> kodunu bulun. buldugunuz ]]></b:skin> kodunun üstüne aşağıda verdigim, kodu kopyala yapışdır yapın kaydet diyin.

<script type='text/javascript'> 
window.onload = function socialButtons() { 
       $(&#39;.social_site&#39;).hover(function() { 
           $(this).stop().animate({ 
               left: &#39;0px&#39; 
           }, 
           &#39;fast&#39;) 
       }, 
       function() { 
           $(this).stop().animate({ 
               left: &#39;-140px&#39; 
           }, 
           &#39;fast&#39;) 
       }) 
   } 
</script> 
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> 
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'> 
{lang: &#39;tr-TR&#39;} 
</script> 
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1' type='text/javascript'/> 
<script src='http://code.jquery.com/jquery-1.6.2.min.js' type='text/javascript'/>

2 Adım :  </body> kodunu aratıyoruz.  buldugumuz </body>  kodu öncesi sizlere aşagıda verdigim kodları ekliyoruz.
      

body .social_site {cursor: pointer;height: 64px;left: -140px;overflow: hidden;position: fixed;width: 200px;z-index: 10000;} 
body .social_closed {left: -170px;} 
body .social_open {left: 0;} 
body .social_site .icon {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqGwzI4Zr7X1gSgxQoA_pAtk_knaxPJEdo714h-dGJFFBGfZNyZ-g5itfAOhydEuYvafYvyv2rNseXA8c17KRtnu700ABXAOA7ZYsEcOPDilpzRunDRU-QV7ScQMa34JnT37oHwWWtdEM/s1600/social-sprite.png") repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;} 
body .social_site .tray {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqGwzI4Zr7X1gSgxQoA_pAtk_knaxPJEdo714h-dGJFFBGfZNyZ-g5itfAOhydEuYvafYvyv2rNseXA8c17KRtnu700ABXAOA7ZYsEcOPDilpzRunDRU-QV7ScQMa34JnT37oHwWWtdEM/s1600/social-sprite.png") repeat-x scroll 0 0 transparent;float: right;height: 64px;width: 140px;} 
body .social_facebook {top: 205px;} 
body .social_facebook .icon {background-position: 60px -74px;} 
body .social_facebook .tray {background-position: -15px -74px;} 
body .social_facebook .tray p { 
display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;} 
body .social_facebook .tray p a, body .social_facebook .tray p a:active, body .social_facebook .tray p a:visited { 
color: #FFF;text-shadow: 1px 1px 0px #077EAB; -webkit-text-shadow: 1px 1px 0px #1F366B; -moz-text-shadow: 1px 1px 0px #1F366B;display: block;font-size: 10px;width: 100%;text-decoration:none;} 
body .social_users {top: 340px;} 
body .social_users .icon {background-position: 60px -6px;} 
body .social_users .tray {background-position: -15px -6px;} 
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;} 
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited { 
color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;} 
body .social_gplus {top: 273px;} 
body .social_gplus .icon {background-position: 60px 71px;} 
body .social_gplus .tray {background-position: -15px -141px;} 
body .social_gplus .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;} 
body .social_gplus .tray p a, body .social_gplus .tray p a:active, body .social_gplus .tray p a:visited {color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}

3 Adım : Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu izleyerek aşağıda verdigim kodları acılan gadget icine, kopyalayıp kaydet deyip cıkmadan önce Kırmızı ile belirtdigim yerlere kendi adreslerinizi yazın.

<div class='social_site social_users' id='social_link_users'><a><div class='icon'/></a> 
<div class='tray bg_denovo'><p><a>Twitter&#39;da Takip Et</a></p> 
<p id='users_online_box'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_=1320542107073&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=tr&amp;link_color=&amp;screen_name=Bloggermimari&amp;show_count=false&amp;show_screen_name=&amp;text_color=' style='width: 100px; height: 20px;margin-top: -15px;margin-left: 15px;' title=''/></p></div></div><div class='social_site social_facebook' id='social_link_facebook'><a><div class='icon'/></a> 
<div class='tray bg_denovo'> 
<p><a>Facebook&#39;ta Beğen</a></p> 
<div class='fb-like' data-href='http://www.facebook.com/Bloggermimari' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' style='margin-left: 30px; margin-top: -20px;'/></div></div> 
<div class='social_site social_gplus' id='social_link_gplus'> 
<a href='#' target='_blank' title='Google+'><div class='icon'/> </a> 
<div class='tray bg_denovo'> 
<p><a>Google&#39;da Öner</a></p><p id='g_plus_box' style='margin-top: -10px;margin-left: 12px;'><g:plusone/></p></div></div>

Dikat : Yukarda Kırmızı İle işaretledigim yerlere kendi adreslerinizi yazmayı unutmayınız.      

Devamını Oku

Gangsky Wordpress Teması

wordpress gangsky teması son derece güzel bir tema, mavi ağırlıklı üç kolu wordpress taması, Tema 4 eklentiyle calışıyor. Bu eklentiler ise Get Recent Comments, WP-PostRatings, WP-PostViews, Yoast Breadcrumbs.

Tema Adı: GangSky
Yapımcı: Gangstamonu
Çeviri: Gangstamonu
Kategori: 3 Kolonlu, Portal
Tarih: August 31st, 2010

                                                    Demo      İndir 

Rara Şifresi : http://blogger-mimari.blogspot.com/

Devamını Oku

Blogger Popüler Yayınlar Eklentisi Renkli - Animasyonlu

Blogger popüler yayınlar eklentisi  güzel görünüm kazandırmaya ne dersiniz?
Blogger'de popüler yayınlar eklentisi var. bildiğiniz gibi bu var olan görünüme, daha renkli ve şık bir görünüm kazandıra bilirsiniz. renkli bir görünüm mausla üstüne gelince, dönem bir resim. popüler yayınların yanında nubaralandırma. blogger popüler yayınlarınıza, animasyonlu bir görünüm kazandırmak isterseniz. aşağıda gösterceğim uygulamayı izlemeniz yeterli olcak.

Blogger Popüler Yayınlar Eklentisi Blogguma Nasıl Uygularım?

1 Adım : Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla ]]></b:skin> kodunu bulun. buldugunuz ]]></b:skin> kodunun üstüne aşağıda verdigim, kodu kopyala yapışdır yapın, kaydet diyip cıkın işlemimiz bitmişdir.

<!-- popüler yayınlar eklentisi  -->
    <div class='noop-searchbox' id='noop-searchbox'>
      <form action='/search' id='noop-searchform' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnPxFQSD5Xx4GUnVHMZvimLip6-Mxp9l6KltVjDM65U4760lD6toPjG2HWrgkidmHeS_LRHrZPDCjIvOffYtylG307OJ6AWT24lFLpmiqIUkalkksuBvGTWkVygoED4YjVTI0aDzDoPNY/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.noop-searchbox {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- popüler yayınlar  eklentisi -->

Devamını Oku

Blogger Yorum Numaralandırma Eklentisi

Blogger Yorumları Nubaralandırma Eklentisi Blogger yorumlarınızı nubaralandıra eklentisiyle, bloggunuza güzel görünüm kazandırabilirsiniz. cok basit bir şekilde bloggunuza, uygulayabilcegiz bir eklenti. aşağıda resimde gördügünüz, gibi bir görünüm kazancaksınız.

Blogger Yorumları Nubaralandırma Eklentisi Blogguma Nasıl Uygularım?  

1 Adım : Blogger  sayfanızı acın. Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin. Ctrl+F yardımıyla ]]></b:skin> kodunu bulun. buldugunuz ]]></b:skin> kodunun üstüne aşağıda verdigim, kodu kopyala yapışdır yapın. kaydet diyip cıkın aşağıda kodun altında gösterdiğim ayarlarla bloggunuza, göre ayarlayabilirsiniz.

.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;
z-index: 2;
position:relative;
font-size: 22px;
color: #555555;
padding-left:10px; 
padding-top:3px; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRcsfaW0D1AFVl1T6FuAkIkntSXBWVKLZORlKtMIHyUdfvLx9bANHpTi5UlL4EgeyYn91bzWrmQRTNUhMsdCiJ0Lz_ghdV8PiRhrbwSfo8W7y_Jpe6nOpJiyM8HHsfS0wlglXah_6RPDRb/s1600/comment+bubble2.png) no-repeat;
margin-top:7px; 
margin-left:10px; 
width: 50px; /*image-width size*/
height: 48px; /*image-height size*/ 
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 18px;
color: #666666;
}

 
width: 50px; yorum nubaralandırma, resim genişlik ayarı.
height: 48px; yorum nubaralandırma, resim boyut ayarı.
padding-left:10px; yorum nubaralandırma, resimi sola kaydırma ayarı.
padding-top:3px; yorum nubaralandırma, sol ayarı.
margin-top:7px; resim üst kenar boşluk ayarı.
margin-left:10px; sol kenar boşluğu
Kırmızı ile işaretledigim yerleri kendinize göre ayarlayabilirsiniz.
Yukarda Kırmızı ile işaretledigim resim urlsi beğenmezseniz. aşağıda ki resimlerden secebilirsiniz. resmin üstüne gelip maus sag tıklayın, resim url kopyalayın alabilirsiniz işelemimiz bitmişdir.

Devamını Oku

Blogger Sosyal Paylas Butonları

Blogger icin sosyal paylaş butonları. günümüzde Google'den sonra,en cok ziyaretci akışı saglayan sosyal Ağlardır. bloggunuza ziyaretci kazandırmak acısından, bize Faydası olcakdır. sosyal ağlarda etkili olmamız, lazım hem Bloggunuz ziyaretci akışını, artdırmak icin hemde yazdıgınız Makaleleri, okuyan bir kitleniz olması icin, önem Vermelisiniz. blggunuzu farklı ziyaretciler okuyucular kazandırarak, yazdıgınız makaleler veya Paylaşdıgınız konuları, bir kitleyle paylaşarak, yapdıgınız işden zevk almamızı saglayacakdır. özellikle Yeni başlayan arkadaşlar icin, ziyaretci kitlesi kazanmak, acısında sosyal paylaş eklentileri kullanmaları faydalı olacakdır.

Blogger Sosyal Paylaş Butonları Blogguma Nasıl Eklerim? 

1. Blogger hesabımıza giriş yapıyoruz.

2.Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu izleyerek aşağıda verdigim kodları acılan gadget icine, kopyalayıp kaydet diyip cıkıyoruz. bloggunuzda nerde görünmesini istiyorsanız oraya sürükleyip bırakın.

<style> 
/*--------blogger-mimari sosyal paylaş butonu ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://mybloggertricks.googlecode.com/files/Sharing%20Touch%20Me.png) no-repeat; 
-webkit-transition: ease-in 0.2s all;    
-moz-transition: ease-in 0.2s all;    
-o-transition: ease-in 0.2s all;    
-ms-transition: ease-in 0.2s all;    
transition: ease-in 0.2s all; 
cursor:pointer;
}

.touchme a.googleplus { 
background-position: 0px -58px;
} 
.touchme a.googleplus:hover { 
background-position: 0px 0px; 
}

.touchme a.twitter { 
background-position: 0px -290px;
} 
.touchme a.twitter:hover { 
background-position: 0px -232px;
} 
.touchme a.facebook { 
background-position: 0px -406px;
} 
.touchme a.facebook:hover { 
background-position: 0px -348px;
}

.touchme a.rss { 
background-position: 0px -174px;
} 
.touchme a.rss:hover { 
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="http://feeds.feedburner.com/bloggermimari" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="https://plus.google.com/117609074188875305380/posts" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="https://www.facebook.com/pages/Blogger-mimar%C4%B1/433412306782177?ref=hl" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="https://twitter.com/Bloggermimari" rel='external nofollow' target='_blank' ></a>

</div>

Yukarda Kırmızı ile gösterdiğim yerlere, kendi  adreslerinizi yazınız.

Devamını Oku